<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2022-07-14 15:28:18
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-09-03 15:30:08
-->
<template>
    <div class="modifyBox">
        <div class="modifyCont" :style="'width:' + width + ';'">
            <div class="hearderBox">
                <img :src="require('../../assets/img/xian_zuo.png')" />
                <div class="name">{{ title }}</div>
                <img :src="require('../../assets/img/xian_you.png')" />
                <img class="closeIcon" @click="Close" :src="require('../../assets/img/icon_close.png')" />
            </div>
            <div class="bottom-list-box">
                <div class="list-item" :style="'height:' + height + 'px;'">
                    <!-- 放置其他内容 -->
                    <slot></slot>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Dialog',
    props: {
        title: {
            type: String,
            default: ''
        },
        width: {
            type: String,
            default: ''
        },
        height: {
            type: String,
            default: '584'
        },
    },
    data() {
        return {
        }
    },
    methods: {
        Close() {
            this.$emit('CloseDialog')
        }
    },
    async mounted() {
    }
}
</script>
<style lang="less" scoped>
.modifyBox {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    z-index: 999;

    .modifyCont {
        min-width: 54%;
        // height: 710px;
        background: #0A1F48;
        border-radius: 10px 10px 10px 10px;
        // border: 1px solid #14489D;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        cursor: pointer;

        .hearderBox {
            height: 60px;
            display: flex;
            align-items: center;
            background-image: url('../../assets/img/tanchuang.png');
            background-size: 100% 100%;
            justify-content: center;
            position: relative;

            .name {
                // height: 26px;
                font-size: 20px;
                font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                font-weight: bold;
                color: #4BEEFF;
                margin: 0 20px;
            }

            img {
                width: 125px;
                height: 19px
            }

            img.closeIcon {
                position: absolute;
                top: 17px;
                right: 20px;
                width: 28px;
                height: 28px;
                cursor: pointer;
            }
        }

        .bottom-list-box {
            // display: flex;

            .list-item {
                // flex: 1;
                width: 100%;
                // background: url('../assets/img/bg_line.png') no-repeat;
                // background-size: 100% 100%;
                // height: 584px;
                text-align: center;
                position: relative;
                padding: 20px;
                cursor: pointer;

                .title {
                    font-size: 24px;
                    font-weight: bold;
                    color: #63F2FF;
                    width: 100%;
                    height: 60px;
                    line-height: 60px;
                    // background: url('../assets/img/bg_mingdanbiaoti.png') no-repeat;
                    background-size: 100% 100%;
                }

                .noDate {
                    position: relative;
                    top: 50%;
                    transform: translateY(-50%);
                    margin-top: -70px;

                    /* 元素往下位移自身高度50%的距离 */
                    img {
                        width: 160px;
                        height: 120px;
                        display: inline-block;
                    }

                    div {
                        font-size: 14px;
                        font-weight: 500;
                        color: #7584B2;
                        margin-top: 10px;
                    }
                }

                                // /deep/ div::-webkit-scrollbar {
                                //     display: none !important;
                                // }

                /deep/ .el-table th,
                /deep/ .el-table tr {
                    font-size: 13px !important;
                }

                .pageBox {
                    position: absolute;
                    bottom: 20px;
                    left: 50%;
                    transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                    -moz-transform: translateX(-50%);
                    -webkit-transform: translateX(-50%);
                    -o-transform: translateX(-50%);

                    /deep/ .el-pagination {
                        margin: auto;

                        .el-input__inner {
                            border: 1px solid #324788 !important;
                            border-radius: 4px !important;
                        }

                        .el-pagination__jump {
                            color: #D2F2FF;
                        }
                    }

                    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
                        background: transparent;
                        border-radius: 4px;
                        border: 1px solid #41F3FE;
                        color: #41F3FE;
                    }

                    /deep/ .el-pagination.is-background .el-pager li {
                        background: #0A1F48;
                        border-radius: 4px;
                        border: 1px solid #324788;
                        color: #D2F2FF;
                        background: #0A1F48;
                    }

                    /deep/ .el-pagination__total {
                        font-weight: 500;
                        color: #D2F2FF;
                    }

                    /deep/ .el-pagination.is-background .btn-prev:disabled,
                    .el-pagination.is-background .btn-prev {
                        background: #0A1F48;
                        border-radius: 4px;
                        border: 1Px solid #324788;
                    }

                    /deep/ .el-pagination.is-background .btn-prev {
                        background: #0A1F48;
                        border-radius: 4px;
                        border: 1px solid #324788;
                    }

                    /deep/ .el-pagination.is-background .btn-next {
                        background: #0A1F48;
                        border-radius: 4px;
                        border: 1px solid #324788;
                    }

                    /deep/ .el-pagination .btn-prev .el-icon {
                        color: #D2F2FF;
                    }

                    /deep/ .el-pagination .btn-next .el-icon {
                        color: #D2F2FF;
                    }
                }
            }

            .list-item:nth-of-type(2) {
                margin: 0 20px;
            }
        }
    }
}
</style>
<style>
.el-tooltip__popper.is-light {
    z-index: 9999999 !important;
    background: #ffffff !important;
    color: #0A1EA5 !important;
    font-size: 14px !important;
}

/* .el-tooltip__popper .popper__arrow::after{
    border-color: #ffffff;
} */
</style>